import React, { Component } from 'react'
import Item from './Item'
import { getListDataAction, getChangeInputAction, getAddItemAction, getDelateItemAction } from './store/actionCreators'
import { connect } from 'react-redux'
import store from './store'
class Todolist extends Component {

    render () {
        const { inputValue, handleInputChange, handleBtnClick, list,handleItemClick } = this.props
        return (
            <div>
                <input value={inputValue} onChange={handleInputChange} />
                <button onClick={handleBtnClick}>提交</button>
                <ul>
                    {
                        list.map((items,index)=>{
                            return (
                                <Item key = {index}
                                    itemClick={handleItemClick} 
                                    index={index} 
                                    item={items} 
                                />
                            )
                        })
                    }
                </ul>
            </div>
        )
    }

    componentDidMount () {
        const action = getListDataAction()
        store.dispatch(action)
    }

}

const mapStateToprops = (state) =>{
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToprops = (dispatch) => {
    return {
        
        handleInputChange(e){
            const action = getChangeInputAction(e.target.value)
            dispatch(action)
        },
        handleBtnClick () {
            const action = getAddItemAction()
            dispatch(action)
            
        },
        handleItemClick (index) {
            const action = getDelateItemAction(index)
            dispatch(action)
        }
    }
}

export default connect(mapStateToprops,mapDispatchToprops)(Todolist)

 // componentDidMount () {
    //     const action = getListDataAction()
    //     store.dispatch(action)
    // }

    // storeChange () {
    //    //用setState修改当前组件state的值
    //    this.setState(store.getState()) 
    // }

    // handleInputChange(e){

    //     // this.setState({
    //     //     inputValue: e.target.value
    //     // })

    //     // const value =  e.target.value
    //     // this.setState(() => {
    //     //     return {
    //     //         inputValue: value
    //     //     }
    //     // })

    //     //用了redux以后
    //     // const action = {
    //     //     type: "change_input_value",
    //     //     inputValue: e.target.value
    //     // }
    //     // store.dispatch(action)

    //     const action = getChangeInputAction(e.target.value)
    //     store.dispatch(action)
    // }

    // handleBtnClick () {

    //     // this.setState((prevState) => {
    //     //     const lists = prevState.list
    //     //     const value = prevState.inputValue
    //     //     lists.push(value)
    //     //     return {
    //     //         list: lists,
    //     //         inputValue: ''
    //     //     }
    //     // })

    //     // const list = this.state.list
    //     // const action = {
    //     //     type: 'add_item_list',
    //     //     list
    //     // }
    //     // store.dispatch(action)
        
    //     const action = getAddItemAction()
    //     store.dispatch(action)
        
    // }

    // handleItemClick (index) {

    //     // this.setState((prevState) => {
    //     //     const lists = prevState.list
    //     //     lists.splice(index,1)
    //     //     return {
    //     //         list: lists,
    //     //     }
    //     // })


    //     // const action = {
    //     //     type: "delate_item_list",
    //     //     index
    //     // }
    //     // store.dispatch(action)

    //     const action = getDelateItemAction(index)
    //     store.dispatch(action)
    // }